import { useEffect, useRef, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import styles from './index.module.scss'
// import Child from './components/child'
// import Clear from './components/clear'

function NotFound () {
  /**
   * 需求：用户不小心输错地址，跳到404页面，倒计时10s，自动跳回首页
   * 步骤：
   * 1. 定义倒计时秒数状态=》useState(10)
   * 2. 在组件挂载的时候开启定时器（存储定时器ID）=》setIterval => 每隔1s减一
   * 3. 监控秒数变化，如果=0，跳回首页
   */
  const hs = useNavigate()
  const [count, setCount] = useState(10)
  const timerId = useRef(0)
  // 模拟生命周期 componentDidMount
  useEffect(() => {
    timerId.current = setInterval(() => {
      // 这么写，就变为watch
      // setCount(count - 1)
      setCount((count) => {
        return count - 1
      })
    }, 1000)
    // componentWillUnmount
    return () => {
      // 组件销毁执行=》清除定时器
      clearInterval(timerId.current)
    }
  }, [])

  useEffect(() => {
    // count变化会执行
    if (count === 0) {
      hs('/', { replace: true })
    }
  }, [count, hs])

  return (
    <div className={styles.box}>
      {/* <Child /> */}
      {/* <Clear /> */}
      {/* <hr /> */}
      <h1>对不起，您访问的页面不存在~</h1>
      <p>
        将在 {count} 秒后，返回首页（或者：点击立即返回
        <Link to="/">首页</Link>）
      </p>
    </div>
  )
}

export default NotFound
